<template>
  <div>
    <el-table :data="pagedData" style="width: 100%">
      <el-table-column prop="id" label="ID" />
      <el-table-column prop="name" label="Name" />
    </el-table>

    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[5, 10, 15, 20]"
      :total="allData.length"
      @current-change="handlePageChange"
      @size-change="handleSizeChange"
      layout="sizes, prev, pager, next, jumper"
      class="mt-4"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'

// 模拟后端返回的数据
const allData = ref(
  Array.from({ length: 30 }, (_, i) => ({
    id: i + 1,
    name: `模拟数据${i + 1}`,
  })),
)

const currentPage = ref(1)

const pageSize = ref(10)

// 当前页数据
const pagedData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return allData.value.slice(start, end)
})

// 切页
const handlePageChange = (page: number) => {
  currentPage.value = page
}

// 切换 pageSize（每页条数）
const handleSizeChange = (newSize: number) => {
  pageSize.value = newSize
  currentPage.value = 1
}
</script>
